<template>
	<div class="page">
		<!-- #ifdef APP-PLUS -->
		<orange-fullloading :loadicon="loadicon" text="加载中" :loadshow="loadshow"></orange-fullloading>
		
		<!-- #endif -->
		<view>

			<div class="semicircle" :style="WanlScroll>25?'display:none':''"></div>
			<!-- <image  class="img-no-accelerate" style="width:100%;height:250rpx;" src="http://zm.zonmay.com/public/uploads/20210520/thumb_a0a89817b8d253e08ec143af18e9953b.png"></image> -->
			<o-navbar :container="true" :isFixed="true" :background="{ backgroundColor: '#214a75' }">

				<view slot="container" class="nav-bar" v-show="city_name">
					<div class="select-text" @tap="toCity()" style="display:flex">

						<text
							style="font-size:32rpx;font-weight: 600;height:50rpx;line-height: 50rpx;">{{city_name}}</text>
						<img class="ico" src="https://zm.zonmay.com/public/static/image/ico_local.svg" alt="">
					</div>
					<div class="input-wrap" @tap="toSearch">
						<text class="wlIcon-sousuo1 text-bold" style="margin-right:10px;"></text>点击搜索
					</div>
					<div class="qian" @tap="toSign()">
						<img style="width: 1.1rem;height:1.1rem;"
							src="https://zm.zonmay.com/public/static/image/btn-index-qiandao.png" alt="">
					</div>
					<div class="icon" @tap="toMessage()">
						<img style="width: 1.1rem;height:1.1rem;"
							src="https://zm.zonmay.com/public/static/image/btn-index-message.png" alt="">
					</div>
				</view>
			</o-navbar>

			<div class="swiper-wraps" v-if="bannerData.length>0">

				<wanl-page-banner :bannerAD="bannerData" />
			</div>
		</view>

		<wanl-page-menu :bannerAD="good_type" v-if="good_type.length>0" />
		<div class="list" style="margin-top:10px;">
			<div class="cell-item">
				<div class="title">最新动态, <span style="color:#828282;margin-left:10px;">时刻关注。</span></div>
				<!-- <div class="right">
				更多
				<image src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
			</div> -->
			</div>
		</div>

		<scroll-view scroll-x style="height:140px;">
			<div class="live" v-if="attentionData.length > 0">
				<div class="live-item1" v-for="item in attentionData">
					<img :src="item.pic" style="width:280px;margin-right:5px;height:130px;">
				</div>
			</div>
		</scroll-view>

		<div class="list" v-if="jp_good.length > 0">
			<div class="cell-item">
				<!-- {{ jp_good[0].sign }} -->
				<div class="title">{{ jp_good[0].sign }}</div>
				<div class="right" @tap="goodsList('jp_good[0].sign')">
					更多
					<image src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
				</div>
			</div>
			<div class="list-item" v-for="(item, index) in jp_good" :key="index" @tap="handleGoods(item.id)">
				<div class="image-wrap">
					<div class="type_name">精品优选</div>
					<image :src="item.cover" mode="scaleToFill" />
				</div>

				<div class="container">
					<div class="title">{{ item.title }}</div>
					<div class="tags">
						<div v-for="(v, i) in item.service_name" :key="i" class="tags-item">{{ v }}</div>
					</div>
					<div class="retail-price">零售价:￥
						<text class="yuan">{{ price_format("yuan", item.current_price) }}</text>
						<text class="fen">.{{ price_format("fen", item.current_price) }}</text>
						<text>/{{ item.unit_name }}</text>
					</div>
					<div class="price" v-if="item.vip_show>0">
						会员价:￥
						<text class="yuan">{{ price_format("yuan", item.vip_price) }}</text>
						<text class="fen">.{{ price_format("fen", item.vip_price) }}</text>
						<text>/{{ item.unit_name }}</text>
					</div>
				</div>
			</div>
		</div>
		<div class="list" v-if="qc_good.length > 0">
			<div class="cell-item">
				<div class="title">{{ qc_good[0].sign }}</div>
				<div class="right" @tap="goodsList('qc_good[0].sign')">
					更多
					<image src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
				</div>
			</div>
			<div class="list-item" v-for="(item, index) in qc_good" :key="index" @tap="handleGoods(item.id)">
				<div class="image-wrap">
					<div class="type_name cbb">{{item.sign}}</div>
					<image :src="item.cover" mode="scaleToFill" />
				</div>

				<div class="container">
					<div class="title">{{ item.title }}</div>
					<div class="tags">
						<div v-for="(v, i) in item.service_name" :key="i" class="tags-item">{{ v }}</div>
					</div>
					<div class="retail-price">零售价:￥
						<text class="yuan">{{ price_format("yuan", item.current_price) }}</text>
						<text class="fen">.{{ price_format("fen", item.current_price) }}</text>
						<text>/{{ item.unit_name }}</text>
					</div>
					<div class="price" v-if="item.vip_show>0">
						会员价:￥
						<text class="yuan">{{ price_format("yuan", item.vip_price) }}</text>
						<text class="fen">.{{ price_format("fen", item.vip_price) }}</text>
						<text>/{{ item.unit_name }}</text>
					</div>
				</div>
			</div>
		</div>
		<div class="list" v-if="xp_good.length > 0">

			<div class="cell-item">
				<div class="title">{{ xp_good[0].sign }}</div>
				<div class="right" @tap="goodsList('xp_good[0].sign')">
					更多
					<image src="https://zm.zonmay.com/public/static/images/icon/right_turn_new.png" alt="" />
				</div>
			</div>
			<div class="list-item" v-for="(item, index) in xp_good" :key="index" @tap="handleGoods(item.id)">
				<div class="image-wrap">
					<div class="type_name tj">{{item.sign}}</div>
					<image :src="item.cover" mode="scaleToFill" />
				</div>

				<div class="container">
					<div class="title">{{ item.title }}</div>
					<div class="tags">
						<div v-for="(v, i) in item.service_name" :key="i" class="tags-item">{{ v }}</div>
					</div>
					<div class="retail-price">零售价:￥
						<text class="yuan">{{ price_format("yuan", item.current_price) }}</text>
						<text class="fen">.{{ price_format("fen", item.current_price) }}</text>
						<text>/{{ item.unit_name }}</text>
					</div>
					<div class="price" v-if="item.vip_show>0">
						会员价:￥
						<text class="yuan">{{ price_format("yuan", item.vip_price) }}</text>
						<text class="fen">.{{ price_format("fen", item.vip_price) }}</text>
						<text>/{{ item.unit_name }}</text>
					</div>
				</div>
			</div>
		</div>
		<div style="height:60px;"></div>
		<!-- #ifdef MP -->
		<zero-privacy :onNeed='onNeed' :hideTabBar='false' :showPrivacy="showPrivacy"></zero-privacy>
		<!-- #endif -->
		<!-- 版本更新 -->
		<!-- #ifdef APP-PLUS -->

		<view class="cu-modal" :class="{ show: update.update }">
			<view class="cu-dialog">
				<view class="hade">
					<!-- <image :src="$wanlshop.appstc('/common/update.png')" mode="aspectFit"></image> -->
					<view class="title">
						<view class="text-white text-bold5">{{ update.data.title }}</view>
						<text class="text-white text-bold5">
							最新版本：{{ update.data.versionName }}
						</text>
					</view>
				</view>

				<view class="info">
					<view class="text-lg text-bold5"><text>更新内容：{{ update.data.versionName }}</text></view>
					<rich-text class="wanl-gray-dark" :nodes="update.data.content" />
					<!-- 开始下载 -->
					<view class="margin-top-xl" v-if="update.download.start">
						<view class="flex margin-bottom-sm">
							<view class="cu-progress round striped active">
								<view class="bg-orange" :style="{ width: update.download.progress + '%' }"></view>
							</view>
							<text class="margin-left-sm">{{ update.download.progress }}%</text>
						</view>
						<view class="wanl-gray-dark text-sm text-center">
							<text>
								下载中，请稍等（{{
										$wanlshop.conver(update.download.totalBytesWritten)
									}}/{{
										$wanlshop.conver(update.download.totalBytesExpectedToWrite)
									}}）
							</text>
						</view>
					</view>
					<!-- 开始安装 -->
					<view class="margin-top-xl text-center" v-else-if="update.download.install">
						安装中...
					</view>
					<!-- 更新提示 -->
					<view class="flex justify-around margin-top-xl" v-else>
						<button class="cu-btn radius-bock bg-gray lg" @tap="update.update=false">
							忽略升级
						</button>
						<button class="cu-btn radius-bock bg-blue lg" @tap="download" style="margin-bottom:10px;">
							立刻升级
						</button>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</div>
</template>

<script>
	import config from '../common/config/config';
	import ONavbar from "../components/o-navbar/index.vue";
	import {
		mapState,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				loadicon: "/static/loading.png",
				loadshow: true,
				showPrivacy: true,
				onNeed: false,
				headHeight: 75,
				windowHeight: 0,
				headTop: 0,
				currentItemId: "home",
				currentData: {},
				scrollLeft: 0,
				isModal: false,
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				liststyle: "col-1-10", //列表样式
				xp_good: [], //商品列表数据
				jp_good: [],
				qc_good: [],
				good_type: [],
				bannerData: [],
				attentionData: [], //最新关注2024年1月9日19:55:16
				showRight: false,
				category: "",
				goodsType: "goods",
				empty: "没有找到任何宝贝",
				params: {
					search: "",
					sort: "weigh",
					order: "asc",
					page: 1,
					filter: {},
					op: {},
				},
				likeData: [],
				reload: false, //判断是否上拉
				last_page: 0,
				status: "loading",
				contentText: {
					contentdown: "",
					contentrefresh: "正在加载..",
					contentnomore: "没有更多数据了",
				},
				city_name: "托普·平邑仓",
				goodsData: [],
			};
		},
		computed: {
			...mapState(["user", "update"]),
		},
		mounted() {
			//检测网络状态
			uni.getNetworkType({
				success: (res) => {
					// this.showNetState(res.networkType);
				}
			});
			//监听网络状态变化
			uni.onNetworkStatusChange((res) => {
				this.showNetState(res.networkType);
			});
		},

		onShow() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 计算页面尺寸
			// let sys = this.$wanlshop.wanlsys();
			// this.headTop = sys.top;

			// this.headHeight = sys.height + uni.upx2px(60);
			// this.windowHeight = sys.windowHeight;
			// setTimeout(() => {
			// 	uni.setNavigationBarColor({
			// 		frontColor: this.$store.state.common.modulesData.homeModules.page ?
			// 			this.$store.state.common.modulesData.homeModules.page.style
			// 			.navigationBarTextStyle : "",
			// 		backgroundColor: this.$store.state.common.modulesData.homeModules.page ?
			// 			this.$store.state.common.modulesData.homeModules.page.style
			// 			.navigationBarBackgroundColor : "",
			// 	});

			// 	// console.log(this.statistics.notice)
			// 	var total = this.statistics.notice.notice + this.statistics.notice.order + this.statistics.notice
			// 		.chat;
			// 	// console.log(total);
			// 	if (total > 0) {
			// 		uni.setTabBarBadge({
			// 			//显示数字
			// 			index: 2, //tabbar下标
			// 			text: "" + total + "",
			// 		});
			// 	}
			// }, 5000);

			// if (this.goodsData.length == 0) {
			// this.loadlikeData();
			// }
			this.city_name = uni.getStorageSync("city_name");
			if (this.city_name) {
				// this.onNeed = true;

				this.showPrivacy = false;
			}
			// this.onNeed = uni.getStorageSync("onNeed")
			this.showPrivacy = uni.getStorageSync("showPrivacy")
			// alert(this.city_name)
			if (!this.city_name) {
				// this.toCity();
				uni.setStorageSync('city_name', '托普·平邑仓')
				this.city_name = '托普·平邑仓';
			}
			
			// uni.setStorageSync('city_name', '任城区')

			this.loadAd();
			this.loadData();

			this.city_name = this.city_name.replace('托普·', '')

			this.loadshow = true;
			setTimeout(() => {
				this.loadshow = false;
			}, 200)



			// uni.showModal({
			// 	title:this.city_name
			// })

		},
		onLoad() {

			// this.loadData();
			// this.loadAd();
			// if (this.goodsData.length == 0) {
			// 	// this.loadlikeData();
			// }
			// this.city_name = uni.getStorageSync("city_name");
			// // alert(this.city_name)
			// if (!this.city_name) {
			// 	this.toCity();
			// }
			
		},
		// 监听上拉
		onPullDownRefresh() {
			this.params.page = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = "noMore";
			} else {
				this.reload = false;
				this.contentText.contentdown = "上拉显示更多";
				this.params.page = this.params.page + 1; //页码+1
				this.status = "loading";
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		// 监听返回
		onUnload() {
			// if (this.showRight) {
			// 	this.closeDrawer();
			// 	return true;
			// }
		},

		methods: {
			...mapActions({
				download: 'update/download', // 立即下载
				ignore: 'update/ignore' // 忽略更新
			}),
			showNetState() {
				uni.getSystemInfo({
					success(res) {

						if (res.osName == 'ios') {

							// #ifdef APP-PLUS
							plus.runtime.restart();
							// #endif
							// #ifdef H5
							window.location.replace();
							// #endif


							// uni.showModal({
							// 	title: '提示',
							// 	content: '系统检测到您网络变化，请点击确定重启应用',
							// 	success: function(res) {
							// 		if (res.confirm) {
							// 			console.log('用户点击确定');
							// 			// #ifdef APP-PLUS
							// 			plus.runtime.restart();
							// 			// #endif
							// 			// #ifdef H5
							// 			window.location.replace();
							// 			// #endif
							// 		} else if (res.cancel) {
							// 			console.log('用户点击取消');
							// 			// easyAlert('请尝试重启应用解决此问题');
							// 			// 可以添加点击取消退出应用
							// 		}
							// 	}
							// });

						} else {
							console.log("我是安卓", res)
						}
					}
				})
			},
			// 弹出层
			handleModal() {
				this.isModal = !this.isModal;
			},
			//禁止父元素滑动 1.0.3升级
			moveHandle() {},
			agree() {
				this.onNeed = true;
				this.setStorageSync('showPrivacy', false);
				console.log(this.onNeed)
			},
			toMessage() {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			toSign() {
				uni.navigateTo({
					url: '/pages/user/signin/signin'
				})
			},
			toSearch(keyword) {
				uni.navigateTo({
					url: '/pages/product/search?keyword=' + keyword
				})
			},
			goodsList(sign) {
				uni.navigateTo({
					url: '/pages/product/list?sign=' + sign
				})
			},
			toCity() {
				uni.navigateTo({
					url: '/pages/city'
				})
			},
			price_format: function(type, price) {
				var status = (price + "").indexOf(".");
				if (status == "-1") {
					if (type == "yuan") {
						return price;
					}
					if (type == "fen") {
						return "00";
					}
				}
				var price_array = (price + "").split(".");
				if (type == "yuan") {
					return price_array[0];
				}
				if (type == "fen") {
					var price_fen = price_array[1].length < 2 ? price_array[1] + "0" : price_array[1];
					return price_fen;
				}
			},
			toPage() {
				uni.navigateTo({
					url: "/pages/city",
				});
			},
			// 动画
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e);
				//#endif
			},
			// 滚动的tag
			changeCurrent(e) {
				this.currentItemId = e.detail.currentItemId;
				this.scrollLeft = (e.detail.current - 1) * 50;
			},
			//异步加载商品列表
			async loadAd() {
				// this.params.good_type_id = 'good';

				this.params.region_name = uni.getStorageSync("city_name");
				await uni.request({
					url: "/api/home/index_ad",
					success: (res) => {
						console.log(888)
						this.bannerData = res.data.banner_ad;
						this.good_type = res.data.good_type
						this.attentionData = res.data.attention_ad;
					},
				});


			},
			//异步加载商品列表
			async loadData() {

				// this.params.good_type_id = 'good';
				this.params.token = uni.getStorageSync("wanlshop:user").token;
				this.params.region_name = uni.getStorageSync("city_name");
				// alert(uni.getStorageSync("city_name"))
				await uni.request({
					url: "/api/home/home",
					data: this.params,
					success: (res) => {
						console.log(999)
						// this.good_type = res.data.good_type;
						this.xp_good = res.data.xp_good;
						this.qc_good = res.data.qc_good;
						this.jp_good = res.data.jp_good;
					},
				});
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				await uni.request({
					url: `/wanlshop/product/likes?pages=${this.goodsType}`,
					success: (res) => {
						this.likeData = res.data; //评论数据 追加
					},
				});
			},
			// 加载侧边栏数据
			async loadDrawer() {
				this.drawerParams.type = this.goodsType;
				await uni.request({
					url: "/wanlshop/product/drawer",
					data: this.drawerParams,
					success: (res) => {
						var brand = [],
							attribute = [];
						if (res.data.brand) {
							res.data.brand.forEach((item) => {
								var brandData = {
									id: item.id,
									name: item.name,
									fold: false, // 展开
									choice: false,
								};
								brand.push(brandData);
							});
						}
						if (res.data.attribute) {
							res.data.attribute.forEach((item) => {
								var value = [];
								item.value.forEach((vo) => {
									var valueData = {
										name: vo.name,
										choice: false,
									};
									value.push(valueData);
								});
								var attributeData = {
									name: item.name,
									value: value,
									fold: false,
								};
								attribute.push(attributeData);
							});
						}
						this.drawerData.brand = brand;
						this.drawerData.attribute = attribute;
					},
				});
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 3) {
					return;
				}
				this.filterIndex = index;
				if (index === 3) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}

				// 排序方式
				if (index === 0) {
					this.params.sort = "weigh";
					this.params.order = "desc";
				}
				if (index === 1) {
					this.params.sort = "sales";
					this.params.order = "desc";
				}
				if (index === 2) {
					this.params.sort = "createtime";
					this.params.order = "desc";
				}
				if (index === 3 && this.priceOrder === 1) {
					this.params.sort = "price";
					this.params.order = "desc";
				}
				if (index === 3 && this.priceOrder === 2) {
					this.params.sort = "price";
					this.params.order = "asc";
				}
				this.status = "loading";
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0,
				});
			},
			// 打开抽屉，并且加载品牌和类目属性
			showDrawer() {
				this.showRight = true;
				if (!this.drawerType.first) {
					this.loadDrawer();
					this.drawerType.first = true;
				}
			},
			// 点击抽屉
			onDraver(e) {
				var index = e.currentTarget.dataset.attribute,
					key = e.currentTarget.dataset.key;
				if (key == "brand" || key == "city") {
					// 取消所有选项,选中下面
					this.drawerData[key].forEach((item, keys) => {
						keys != index ? (item.choice = false) : "";
					});
					// 取消同城
					this.drawerData.sameCity.choice = false;
					this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
				} else if (key == "sameCity") {
					// 取消所有城市选项
					this.drawerData.city.forEach((item) => {
						item.choice = false;
					});
					this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
				} else {
					// 取消所有选项,选中下面
					this.drawerData.attribute[index].value.forEach((item, keys) => {
						keys != key ? (item.choice = false) : "";
					});
					this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key]
						.choice;
				}
			},
			// 提交抽屉
			onDrawerTo() {
				// 查询价格
				if (this.drawerData.price.low != "" && this.drawerData.price.high != "") {
					this.params.filter.price = this.drawerData.price.low + "," + this.drawerData.price.high;
					this.params.op.price = "BETWEEN";
				} else {
					delete this.params.filter.price;
					delete this.params.op.price;
				}
				// 查询地址
				var cityData = "";
				this.drawerData.city.forEach((item) => {
					if (item.choice) {
						cityData = item.name;
					}
				});
				if (cityData) {
					this.params.filter["shop.city"] = "%" + cityData + "%";
					this.params.op["shop.city"] = "LIKE";
				} else if (this.drawerData.sameCity.choice) {
					this.params.filter["shop.city"] = this.drawerData.sameCity.name;
					this.params.op["shop.city"] = "LIKE";
				} else {
					delete this.params.filter["shop.city"];
					delete this.params.op["shop.city"];
				}
				// 查询品牌
				var brandData = "";
				this.drawerData.brand.forEach((item) => {
					if (item.choice) {
						brandData = item.id;
					}
				});
				if (brandData) {
					this.params.filter.brand_id = brandData;
					this.params.op.brand_id = "=";
				} else {
					delete this.params.filter.brand_id;
					delete this.params.op.brand_id;
				}
				// 查询属性
				var attributeData = [];
				this.drawerData.attribute.forEach((item, index) => {
					// item.name
					item.value.forEach((vo, index) => {
						if (vo.choice) {
							attributeData.push("%" + vo.name + "%");
						}
					});
				});
				// 1.0.8升级 有此项无法查询
				if (attributeData.length > 0) {
					this.params.filter.category_attribute = attributeData.join(",");
					this.params.op.category_attribute = "LIKE";
				} else {
					delete this.params.filter.category_attribute;
					delete this.params.op.category_attribute;
				}
				this.status = "loading";
				// 1.0.8升级
				this.goodsData = [];
				this.params.page = 1;
				this.reload = true;
				this.loadData();
				this.closeDrawer();
			},
			// 重置抽屉
			onDrawerReset() {
				this.drawerData.city.forEach((item) => {
					item.choice = false;
				});
				this.drawerData.sameCity.choice = false;
				this.loadDrawer();
			},
			// 点击抽屉标题
			onDraverTitle(e) {
				var stype = e.currentTarget.dataset.key;
				if (stype === "city") {
					this.drawerType[stype] = !this.drawerType[stype];
				} else {
					this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
				}
			},
			// 关闭抽屉
			closeDrawer() {
				this.showRight = false;
			},
			search() {
				this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, "fade-in", 100);
			},
			editListstyle() {
				this.liststyle = this.liststyle == "col-1-10" ? "col-2-20" : "col-1-10";
			},
			handleGoods(id) {
				this.$wanlshop.to(`/pages/product/goods?good_id=${id}`);
				// this.$wanlshop.to(`/pages/apps/groups/goods?good_id=${id}`);
			},
		},
		components: {
			ONavbar,
		},
	};
</script>
<style lang="scss" scoped>
	.WANL-MODAL {
		.cu-modal {
			&.top-modal {
				background: rgba(0, 0, 0, 0.6);
				text-align: inherit;

				.cu-dialog {
					background: #fff;
					border-radius: 0 0 18rpx 18rpx;

					.category {
						display: grid;
						grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
						grid-auto-flow: row dense;
						grid-gap: 16rpx;

						.item {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 12rpx 0;
							border: 2rpx solid transparent;

							&.action {
								background-color: transparent;
								border-color: #f40;
								color: #f40;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}


	.page {
		width: 100%;

		.semicircle {
			position: fixed;
			top: 0rpx;
			left: 0;
			background: url("http://zm.zonmay.com/public/uploads/20210520/thumb_a0a89817b8d253e08ec143af18e9953b.png") no-repeat;
			background-size: contain;
			width: 100%;
			height: 410rpx;
		}

		.nav-bar {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
			padding: 0 10rpx;
			box-sizing: border-box;

			.input-wrap {
				width: 50%;
				height: 60rpx;
				line-height: 60rpx;
				background: #fff;
				color: #000;
				border-radius: 50rpx;
				// margin-left: 20rpx;
				margin-right: 10rpx;
				text-align: center;
			}

			.qian {
				width: 50rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				border-radius: 50%;
				box-sizing: border-box;
				font-size: 28rpx;
				// border: 1rpx solid #fff;
				margin-right: 10rpx;
			}

			.ico {
				width: 50rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
			}

		}

		.swiper-wraps {
			position: relative;
			overflow: hidden;
			position: relative;
			// margin-top:-120px;

		}

		.live {
			display: flex;
			padding: 0 20rpx;
			// margin-top: 10rpx;
			width: 100%;
			height: 280rpx;

			&-item {
				height: 250rpx;
				// min-width: 300rpx;
				// margin-right: 20rpx;
				// background: #214a75;
				border-radius: 10rpx;
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
				justify-items: center;
			}


		}

		.cell-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			height: 70rpx;

			.title {
				font-size: 32rpx;
				font-weight: 900;
				color: #222222;
			}

			.right {
				color: #222222;
				display: flex;
				align-items: center;

				image {
					width: 20rpx;
					height: 35rpx;
				}
			}
		}

		.list {

			padding: 10rpx 20rpx;
			box-sizing: border-box;

			&-item {
				margin-top: 10rpx;
				display: flex;
				background: #fff;
				box-sizing: border-box;
				padding: 20rpx;
				border-radius: 10rpx;

				.image-wrap {
					position: relative;
					overflow: hidden;
					border-radius: 10rpx;
					width: 200rpx;
					height: 200rpx;

					.type_name {
						position: absolute;
						background: #4385ea;
						left: 0;
						bottom: 0;
						padding: 5rpx 15rpx;
						box-sizing: border-box;
						z-index: 111;
						color: #fff;
						font-size: 24rpx;
					}

					image {
						width: 100%;
						height: 100%;
					}
				}

				.container {
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.title {
						font-size: 28rpx;
						color: #2e2e2e;
						font-weight: 900;
					}

					.tags {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						margin-top: 10px;
						font-weight: 600;

						&-item {
							background: #eff9ff;
							border-radius: 4rpx;
							border: 1rpx solid #005a93;
							color: #005a93;
							margin-right: 10rpx;
							padding: 3rpx;
						}
					}

					.retail-price {
						color: #214a75;
						margin-top: 2px;
						font-size: 26rpx;
						font-weight: 600;

						.yuan {
							font-size: 34rpx;
						}

						.fen {
							font-size: 30rpx;
						}
					}

					.price {
						color: #e90000;
						font-size: 26rpx;
						font-weight: 600;

						.yuan {
							font-size: 34rpx;
						}

						.fen {
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}

	.cbb {
		background: #17cbb7 !important;
	}

	.tj {
		background: #f73024 !important;
	}

	.img-no-accelerate {
		transform: translate3d(0, 0, 0);
	}
</style>